<template>
  <div class="common-details">
    <customDetailsTopbar title="碳配额履约管理" flag @back="back" />
    <div id="customScroolBox" class="px-1 d-scroll">
      <div class="d-flex mt-2 w-100">
        <custom-radio-tag1 class="mb-1 w-100" :list="tagList" :value="checkedTagIndex" :check-value="checkedTag" is-scroll @change="tagChange" />
      </div>
      <customSearch ref="customSearch" placeholder="请输入企业名称" :title="`${checkedTag}列表`" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <div v-if="tableList.length>0" class="common_list">
        <div v-for="(item, index) in tableList" :key="index" class="list_item" @click="goDetail(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
              </div>
              <ul class="des-list">
                <li v-for="(des, ind) in desList" :key="des.value" class="des">
                  <i :class="'iconfont c-text-color' + (ind + 1)" v-html="des.icon" />
                  <div class="label">{{ des.label }}：</div>
                  <div class="value">{{ item[des.value] }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll safe-area-inset-bottom close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <template v-if="checkedTag === '配额盈缺分析'">
            <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.isIntoCarbon" title="是否纳入碳排放交易系统" />
          </template>
          <custom-timer type="year" title="年份" :is-interval="false" :picker-title="'请选择年份'" :date-value.sync="form.year" @update:dateValue="getTime" />
          <template v-if="checkedTag === '碳排放报告管理'">
            <div class="checkbox-title">报告名称</div>
            <el-input v-model="form.reportName" placeholder="请输入报告名称" size="small" clearable />
            <custom-timer style="margin-top: 10px" :start.sync="form.startTime" :end.sync="form.endTime" title="上传时间" />
          </template>
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { tpfReportManageList, performanceRegistrateManageList, quotasProfitAnalysistList } from '@/api/carbon'
export default {
  mixins: [commonList],
  data() {
    return {
      total: 10,
      pages: 1,
      form: {
        pageNum: 1,
        pageSize: 10,
        companyName: '',
        year: '',
        isIntoCarbon: '',
        reportName: '',
        years: '',
        startTime: '',
        endTime: ''
      },
      tagList: [
        { label: '碳排放报告管理', value: '碳排放报告管理', listFun: tpfReportManageList },
        { label: '配额盈缺分析', value: '配额盈缺分析', listFun: quotasProfitAnalysistList },
        { label: '履约登记管理', value: '履约登记管理', listFun: performanceRegistrateManageList }
      ],
      listFun: tpfReportManageList,
      checkedTag: '碳排放报告管理',
      desListMap: {
        碳排放报告管理: [
          { label: '报告名称', value: 'reportName', icon: '&#xe790;' },
          { label: '年份', value: 'year', icon: '&#xe8d5;' },
          { label: '行业类别', value: 'industry', icon: '&#xe634;' },
          { label: '上传时间', value: 'reportTime', icon: '&#xe685;' },
          { label: '编制时间', value: 'compileTime', icon: '&#xe617;' }
        ],
        配额盈缺分析: [
          { label: '是否纳入碳排放交易系统', value: 'isIntoCarbon', icon: '&#xe668;' },
          { label: '登记日期', value: 'recordDate', icon: '&#xe685;' },
          { label: '年份', value: 'year', icon: '&#xe8d5;' }
        ],
        履约登记管理: [
          { label: '年份', value: 'year', icon: '&#xe8d5;' },
          { label: '碳排放量（吨二氧化碳当量）', value: 'carbonEmission', icon: '&#xe61c;' }
        ]
      },
      checkedTagIndex: 0,
      desList: [],
      tableList: []
    }
  },
  mounted() {
    const { tag } = this.$route.query
    if (tag) {
      this.checkedTag = tag
      const checkValueIndex = this.tagList.findIndex(val => val.label === tag)
      this.checkedTagIndex = checkValueIndex
      this.listFun = this.tagList[checkValueIndex].listFun
    }
    this.desList = this.desListMap[this.checkedTag]
    this.getList()
  },
  methods: {
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.$route.query.current }
      })
    },
    goDetail(item) {
      this.$router.push({
        path: '/staging/performanceDetail',
        query: { current: this.$route.query.current, tag: this.checkedTag, ...item }
      })
    },
    tagChange(val) {
      this.checkedTag = val.item.value
      this.desList = this.desListMap[this.checkedTag]
      this.listFun = val.item.listFun
      this.tableList = []
      this.$refs.customSearch.restore()
      this.form = {
        pageNum: 1,
        pageSize: 10,
        companyName: ''
      }
      this.getList()
    },
    async getList() {
      this.$refs.customLoadmore.loadStatus = true
      this.form.years = this.form.year
      const { status, data } = await this.listFun(this.form)
      if (status === 0 && data) {
        this.total = data.total
        this.tableList = this.tableList.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
    },
    handleSearch(value) {
      this.form.companyName = value
      this.form.pageNum = 1
      this.tableList = []
      this.getList()
    },
    handlePages(value) {
      this.form.pageNum = value
      this.getList()
    },
    getTime(val) {
      this.form.year = val
    },
    // 高级查询
    handleSuperSearch() {
      this.form.pageNum = 1
      this.superSearch = false
      this.tableList = []
      this.getList()
    },
    // 重置高级查询
    resetSuperSearch() {
      this.form.pageNum = 1
      this.form.isIntoCarbon = ''
      this.form.year = ''
      // this.superSearch = false
      // this.listData = []
      // this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.right_content {
  .des-list {
    display: flex;
    flex-wrap: wrap;
    .des {
      width: 100%;
    }
  }
}
</style>
